<template>
  <DynamicList
    ref="roleListTable"
    v-bind="roleListColumns"
    @load-data="setPage"
    @reset-data="onResetData"
  >
    <template #tableTop>
      <a-space class="flex-wrap" size="small">
        <a-button
          v-if="$auth('system-role-add')"
          type="primary"
          @click="router.push('/system/role/roleDetail')"
        >
          <PlusOutlined /> 新增
        </a-button>
      </a-space>
    </template>
  </DynamicList>
</template>

<script setup lang="tsx">
  import { ExclamationCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import { message, Modal } from 'ant-design-vue';
  import DynamicList from '@/components/dynamicList/index.vue';
  import { formatToDateTime } from '@/utils/dateUtil';
  import { RequestEnum } from '@/enums/httpEnum';
  import useRequestList from '@/hooks/useRequestList';
  import { deleteRole, sysRoleApi } from '@/api/system/role';
  import { ComponentsTypeEnum } from '@/enums/componentsEnum';
  import { verifyAuth } from '@/core/permission';

  defineOptions({
    name: 'roleList',
  });
  const roleListTable = ref<any>(null);
  const router = useRouter();
  const { list, page, setPage, loading } = useRequestList({
    apiKey: sysRoleApi.sysRolePage,
    type: RequestEnum.GET,
  });
  const roleListColumns = ref({
    columns: [
      {
        title: 'ID',
        width: 50,
        align: 'center',
        dataIndex: 'id',
      },
      {
        title: '角色名称',
        width: 200,
        align: 'center',
        dataIndex: 'roleName',
        search: true,
        component: ComponentsTypeEnum.Input,
      },
      {
        title: '创建时间',
        width: 200,
        align: 'center',
        dataIndex: 'createTime',
        customRender: ({ text }) => {
          return text ? formatToDateTime(text) : '-';
        },
      },
      {
        title: '备注',
        width: 200,
        align: 'center',
        dataIndex: 'remark',
      },
      {
        title: '操作',
        width: 150,
        dataIndex: 'operation',
        align: 'center',
        fixed: 'right',
        actions: [
          {
            title: '编辑',
            vIf: verifyAuth('system-role-update'),
            onClick: (record) => {
              router.push(`/system/role/roleDetail?id=${record.id}`);
            },
          },
          {
            title: '删除',
            vIf: verifyAuth('system-role-delete'),
            onClick: (record) => {
              deleteConfirmRole(record);
            },
          },
        ],
      },
    ],
    pageParams: page,
    list,
    loading,
  });

  const deleteConfirmRole = async (record) => {
    Modal.confirm({
      title: '确定要删除吗?',
      icon: <ExclamationCircleOutlined />,
      centered: true,
      onOk: async () => {
        const res = await deleteRole({ id: record.id });
        if (res) {
          message.success(res?.msg);
          roleListTable.value && roleListTable.value.resetFields();
        }
      },
    });
  };

  const onResetData = (queryParams) => {
    setPage(queryParams);
  };
</script>

<style></style>
